<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!--
            使用v-model双向绑定，当输入框中的内容变更后下方div中的内容也会变更；当数据变更后，输入框中的内容也会变更
         -->
        <!--<input v-model="inputText"/>
        <div>{{inputText}}</div>
        <button @click="this.inputText=''">清空</button>-->

        <!--
            手动实现双向绑定
            :value 表示 v-bind:value="inputText"
            v-bind是单向绑定的，就是数据变更后会改变输入框中的内容，但是输入框中的内容不会改变数据
            @input="action" 表示 v-on:input="action"
            当输入框中的内容变更后我们会调用暴露的action方法，在这个方法中我们可以同步更新inputText的值
        -->
        <input :value="inputText" @input="action"/>
        <div>{{inputText}}</div>
        <button @click="this.inputText=''">清空</button>
    </div>

<script>
    const {createApp,ref} = Vue
    const app = createApp({
        setup() {
            // 与输入框双向绑定的属性
            const inputText = ref("")
            // 当输入框中的内容变化后调用函数
            const action = (e) => {
                inputText.value = e.target.value
            }
            return {inputText, action}
        }
    })
    app.mount('#app')
</script>
</body>
</html>